<template>
		<div class="tabBarItem" @click="itemClick">
			<div v-if="!isActive"><slot name="item-img"></slot></div>
			<div v-else><slot name="item-img-active"></slot></div>
			<div :style="activeStyle"><slot name="item-text"></slot></div>
		</div>

</template>

<script>
	export default{
		props:{
			link: String,
			activeColor:{
				type:String,
				default:'#ff0000'
			}
		},
		computed:{
			isActive(){
				return this.$route.path.indexOf(this.link) !== -1
			},
			activeStyle(){
				return this.isActive ? {color:this.activeColor} : {}
			}
		},
		methods:{
			itemClick(){
				this.$router.push(this.link)
			}
		}
	}
</script>

<style>
	.tabBarItem{
		flex: 1;
		text-align: center;
		height: 49px;
		font-size: 14px;
	}
	.tabBarItem img{
		height: 24px;
		margin-top: 3px;
		vertical-align: middle;
	}
</style>
